<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta content="width=device-width, initial-scale=1.0" name="viewport">
    <title>用户登录</title>
    <script src="js/jquery.min.js"></script>
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <script src="js/bootstrap.min.js"></script>
    <link href="element-ui@2.15.14/lib/theme-chalk/index.css" rel="stylesheet">
    <script src="js/vue@2.js"></script>
    <script src="element-ui@2.15.14/lib/index.js"></script>
    <script src="js/util.js" type="text/javascript"></script>
    <style type="text/css">
        body {
            /*background-image: url("img/bg.jpg");*/
        }

        #app {
            border-radius: 4px;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            padding: 3rem;
            width: fit-content;
            background-color: white;
            box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04)
        }

        .form-item {
            margin-bottom: 2.5rem;
        }

        input {
            border: 1px solid #c5c5c5;
            padding: 0.3rem;
            border-radius: 5px;
        }
    </style>
</head>
<body>
<div id="app">
    <div style="text-align: center;margin-bottom: 2rem;font-size: 25px;font-weight: bold">修改密码</div>
    <form id="resetForm">
        <!--隐藏域-->
        <input name="username" type="hidden"/>
        <input name="role" type="hidden"/>
        <div class="form-item">
            账号：
            <span name="username"></span>
        </div>
        <div class="form-item"> 原密码：<input class="" name="password" type="password"/></div>
        <div class="form-item"> 新密码：<input name="newPassword" type="password"/></div>
        <div class="form-item">
            <input class="btn btn-primary" type="submit" value="修改"/>
            <input class="btn btn-warning" onclick="goIndex()" style="margin-left: 2rem" type="button" value="返回"/>
        </div>


    </form>
</div>


<script type="text/javascript">
    const app = new Vue({
        el: "#app",
    })

    function goIndex() {
        window.location = "index.html";
    }

    if (!isLogin()) {
        app.$message.error("您没有登录")
        setTimeout(() => {
            location.href = 'login.html'
        }, 500)
    }

    if (!isAdmin()) {
        app.$message.error("您无权操作")
        setTimeout(() => {
            location.href = 'index.html'
        }, 500)
    }
    $(function () {
        $("input[name='username']").val(user.username)
        $("input[name='role']").val(user.role)
        $("span[name='username']").text(user.username)
        $("#resetForm").submit(function () {
            event.preventDefault();
            $.ajax({
                type: "post",
                url: "user?action=doResetPassword",
                data: $("#resetForm").serialize(),
                async: true,
                success: function (res) {
                    res = JSON.parse(res);
                    if (res.code == 1) {
                        app.$message({
                            message: res.msg,
                            type: 'success'
                        });
                        localStorage.removeItem("user");
                        setTimeout(() => {
                            window.location = "index.html"
                        }, 500)
                    } else {
                        app.$message.error(res.msg);
                    }
                }
            })
        })

    })
</script>
</body>
</html>
